<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!-- 引入jquery文件-->
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
        <!-- 引入最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <style type="text/css">
            #hello{
                font-family: ‘Courier New’, Courier, monospace;
                font-size: 40px;
                color: lightgreen;
                float: left;
                font-weight: bold;
            }
            #world{
                font-family: ‘Courier New’, Courier, monospace;
                font-size: 40px;
                float: left;

            }
            #login{
                width: 100px;
                height: 40px;
                border: 2px solid lightgreen;
                border-radius: 4px;
                float: right;
                margin-top: 10px;
                margin-right: 10%;
            }
            #login-p{
                font-size: 20px;
                color: lightgreen;
                text-align: center;
                line-height: 40px;
            }
            #img2{
                width: 30px;
                height: 30px;
                float: left;
                margin-top: 10px;
                margin-left: 10%;}
            #clear{
                clear: both;
            }
            #gouwuche{
                width: 130px;
                height: 40px;
                border: 2px solid lightgreen;
                border-radius: 4px;
                float: right;
                margin-top: 10px;
                margin-right: 1%;
                background-color: lightgreen
            }
            #gouwuche-p{
                font-size: 20px;
                color: #FFF;
                float: left;
                margin-left: 15px;
                line-height: 40px;
            }
        </style>
    </head>
    <body>

        <img id="img2" src="img/logo.png">
        <div id="hello">Hello</div><div id="world">World</div>
        
        <div id="login"><div id="login-p">登录</div></div>
        <div id="gouwuche"><img src="img/gouwuche.png" style="width: 30px; height: 30px; float: left; margin-left: 5px; margin-top: 2px;"><p id="gouwuche-p">购物车</p></div>
        <div id="clear"></div>
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="images/lunbo2.jpg"  style="width: 100%; height: 400px;">
                    <div class="carousel-caption">

                    </div>
                </div>
                <div class="item">
                    <img src="images/lunbo3.jpg" style="width: 100%; height: 400px;">
                    <div class="carousel-caption">

                    </div>
                </div>
                <div class="item">
                    <img src="images/17.jpg" style="width: 100%; height: 400px;">
                    <div class="carousel-caption">

                    </div>
                </div>

            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="background-color: lightgreen">
                Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>
    </body>
</html>
